iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Modern Web

起步Go!Let's Go!系列 第 23

[ Day 23 ] Go 模板引擎:動態生成 HTML 頁面的魔法

  • 分享至 

  • xImage
  •  

在昨天的練習中,當我們使用 GET 請求時,並成功得到網站中的資料,我們都用是終端機查看回傳的資訊,雖然一樣可以達到查看資料的目的,但好像缺少了什麼!!
這就不得不提到組成 Web 畫面的 HTML,它是最直覺的呈現 Web 頁面的方式。HTML 是一種標記語言,用於結構化網頁的內容。
然而,在動態網站中,指示用固定的 HTML 內容是不足以應付現在日益繁雜的網站需求,這時就可以使用 Go 模板引擎來幫我們根據不同情境動態生成 HTML 頁面了。

為甚麼要用 Go 模板引擎??

Go 模板引擎是 Go 語言內建的一個工具,但說穿了它就是一個內建於 Go 的一個套件,這個套件是用於將動態生成的數據注入到 HTML 中。它有幾點優勢:

  • 易於使用: Go 模板語法簡單直觀,學習曲線較為平緩,只需要基本的 HTML 的知識就可以使用。
  • 安全: 模板引擎內建了自動防範注入攻擊的機制,可以有效地防止 XSS 攻擊。
  • 內建功能: 支援條件語句、迴圈等基本結構,滿足大部分的動態生成需求。

這個模板引擎不僅提供安全的 HTML 輸出,也支援模板嵌套、條件語句、迴圈等功能,使開發者能夠方便地構建動態且安全的 HTML 頁面。

要怎麼使用?

匯入套件

首先,我們必須匯入 html/template,如果你想要在瀏覽器上看到結果,也必須匯入前天提到的 net/http,如下:

import (
    "html/template"
    "net/http"
)

產生一個要用的結構體

之前有提到結構體 struct,這邊我們需要用到它來幫我們定義一些變數:

type PageVariables struct {
	Title   string
	Message string
}

這邊我定義了 Title 及 Message 這兩個變數以便我等一下使用它們。

主函式 main

這邊跟前天提到的差不多:

package main
import (
    "html/template"
    "net/http"
)
func main(){
    http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}

此時,你去執行 go build 那一定會出錯,因為你還沒有處理完進到根目錄要處理的函式。

寫一些 HTML

只差最後一步就完成了,這也是為什麼要匯入 html/tmplete 這個套件:

func handler(w http.ResponseWriter, r *http.Request) {
	pageVariables := PageVariables{
		Title:   "冒險開始",
		Message: "歡迎來到冒險之旅!",
	}

	tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
    <title>{{.Title}}</title>
</head>
<body>
    <h1>{{.Title}}</h1>
    <p>{{.Message}}</p>
</body>
</html>
`)

	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	err = tmpl.Execute(w, pageVariables)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}
}

將積木組合起來

package main

import (
	"html/template"
	"net/http"
)

type PageVariables struct {
	Title   string
	Message string
}

func handler(w http.ResponseWriter, r *http.Request) {
	pageVariables := PageVariables{
		Title:   "冒險開始",
		Message: "歡迎來到冒險之旅!",
	}

	tmpl, err := template.New("index").Parse(`
<!DOCTYPE html>
<html>
<head>
    <title>{{.Title}}</title>
</head>
<body>
    <h1>{{.Title}}</h1>
    <p>{{.Message}}</p>
</body>
</html>
`)

	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	err = tmpl.Execute(w, pageVariables)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}
}

func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":8080", nil)
}

執行結果:
新手頁面

當你看到這個畫面就代表你成功建置了自己的網頁,當然我們不能滿足於此,明天我們將繼續往更進階的目標去邁進,我們明天見。


上一篇
[ Day 22 ] GO 創建簡單的用戶端:踏上與伺服器對話的征途
下一篇
[ Day 24 ] Go 路由:尋找正確的道路
系列文
起步Go!Let's Go!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言